<!DOCTYPE html>
<!-- Many of these are currently wrong. See https://github.com/LadybirdBrowser/ladybird/issues/1812 -->
<style>
    :root {
        --n: 2;
    }
</style>
<script src="../include.js"></script>
<div id="target">Well, hello friends</div>
<script>
    test(() => {
        let properties = {
        "animation-delay": [
            "calc(2s)",
            "calc(2s * var(--n))",
        ],
        "animation-duration": [
            "calc(2s)",
            "calc(2s * var(--n))",
        ],
        "animation-iteration-count": [
            "calc(2)",
            "calc(2 * var(--n))",
        ],
        "backdrop-filter": [
            "grayscale(calc(2%))",
            "grayscale(calc(2% * var(--n)))",
            "grayscale(calc(0.02))",
            "grayscale(calc(0.02 * var(--n)))",
        ],
        "background-position-x": [
            "calc(2px)",
            "calc(2px * var(--n))",
        ],
        "background-position-y": [
            "calc(2%)",
            "calc(2% * var(--n))",
        ],
        "background-size": [
            "calc(2px * var(--n)) calc(2%)",
            "calc(2px * var(--n)) calc(2% * var(--n))",
        ],
        "border-bottom-left-radius": [
            "calc(2px)",
            "calc(2px * var(--n))",
        ],
        "border-bottom-right-radius": [
            "calc(2%)",
            "calc(2% * var(--n))",
        ],
        "border-bottom-width": [
            "calc(2px)",
            "calc(2px * var(--n))",
        ],
        "border-left-width": [
            "calc(2px)",
            "calc(2px * var(--n))",
        ],
        "border-right-width": [
            "calc(2px)",
            "calc(2px * var(--n))",
        ],
        "border-spacing": [
            "calc(2px)",
            "calc(2px * var(--n))",
        ],
        "border-top-left-radius": [
            "calc(2px)",
            "calc(2px * var(--n))",
        ],
        "border-top-right-radius": [
            "calc(2%)",
            "calc(2% * var(--n))",
        ],
        "border-top-width": [
            "calc(2px)",
            "calc(2px * var(--n))",
        ],
        "bottom": [
            "calc(2px)",
            "calc(2px * var(--n))",
        ],
        "clip-path": [
            "polygon(calc(0px) calc(2px), calc(2px) calc(0px), calc(2px) calc(2px))",
            "polygon(calc(0px * var(--n)) calc(2px * var(--n)), calc(2px * var(--n)) calc(0px * var(--n)), calc(2px * var(--n)) calc(2px * var(--n)))",
            "polygon(calc(0%) calc(2%), calc(2%) calc(0%), calc(2%) calc(2%))",
            "polygon(calc(0% * var(--n)) calc(2% * var(--n)), calc(2% * var(--n)) calc(0% * var(--n)), calc(2% * var(--n)) calc(2% * var(--n)))",
        ],
        "column-count": [
            "calc(2)",
            "calc(2 * var(--n))",
        ],
        "column-gap": [
            "calc(2px)",
            "calc(2px * var(--n))",
        ],
        "column-width": [
            "calc(2px)",
            "calc(2px * var(--n))",
        ],
        "counter-increment": [
            "foo calc(2)",
            "foo calc(2 * var(--n))",
        ],
        "counter-reset": [
            "foo calc(2)",
            "foo calc(2 * var(--n))",
        ],
        "counter-set": [
            "foo calc(2)",
            "foo calc(2 * var(--n))",
        ],
        "cx": [
            "calc(2px)",
            "calc(2px * var(--n))",
        ],
        "cy": [
            "calc(2%)",
            "calc(2% * var(--n))",
        ],
        "fill-opacity": [
            "calc(2)",
            "calc(2 * var(--n))",
        ],
        "filter": [
            "grayscale(calc(2%))",
            "grayscale(calc(2% * var(--n)))",
            "grayscale(calc(0.02))",
            "grayscale(calc(0.02 * var(--n)))",
        ],
        "flex-basis": [
            "calc(2px)",
            "calc(2px * var(--n))",
        ],
        "flex-grow": [
            "calc(2)",
            "calc(2 * var(--n))",
        ],
        "flex-shrink": [
            "calc(2)",
            "calc(2 * var(--n))",
        ],
        "font-feature-settings": [
            "'test' calc(2)",
            "'test' calc(2 * var(--n))",
        ],
        "font-size": [
            "calc(2px)",
            "calc(2px * var(--n))",
        ],
        "font-variation-settings": [
            "'test' calc(2)",
            "'test' calc(2 * var(--n))",
        ],
        "font-weight": [
            "calc(2)",
            "calc(2 * var(--n))",
        ],
        "font-width": [
            "calc(2%)",
            "calc(2% * var(--n))",
        ],
        "grid-auto-columns": [
            "calc(2fr)",
            "calc(2fr * var(--n))",
        ],
        "grid-auto-rows": [
            "calc(2fr)",
            "calc(2fr * var(--n))",
        ],
        "grid-template-columns": [
            "calc(2fr)",
            "calc(2fr * var(--n))",
        ],
        "grid-template-rows": [
            "calc(2fr)",
            "calc(2fr * var(--n))",
        ],
        "height": [
            "calc(2px)",
            "calc(2px * var(--n))",
        ],
        "left": [
            "calc(2px)",
            "calc(2px * var(--n))",
        ],
        "letter-spacing": [
            "calc(2px)",
            "calc(2px * var(--n))",
        ],
        "line-height": [
            "calc(2)",
            "calc(2 * var(--n))",
        ],
        "margin-bottom": [
            "calc(2px)",
            "calc(2px * var(--n))",
        ],
        "margin-left": [
            "calc(2%)",
            "calc(2% * var(--n))",
        ],
        "margin-right": [
            "calc(2px)",
            "calc(2px * var(--n))",
        ],
        "margin-top": [
            "calc(2%)",
            "calc(2% * var(--n))",
        ],
        "math-depth": [
            "calc(2)",
            "calc(2 * var(--n))",
        ],
        "max-height": [
            "calc(2px)",
            "calc(2px * var(--n))",
        ],
        "max-width": [
            "calc(2%)",
            "calc(2% * var(--n))",
        ],
        "min-height": [
            "calc(2px)",
            "calc(2px * var(--n))",
        ],
        "min-width": [
            "calc(2%)",
            "calc(2% * var(--n))",
        ],
        "opacity": [
            "calc(2)",
            "calc(2 * var(--n))",
        ],
        "order": [
            "calc(2)",
            "calc(2 * var(--n))",
        ],
        "outline-offset": [
            "calc(2px)",
            "calc(2px * var(--n))",
        ],
        "outline-width": [
            "calc(2px)",
            "calc(2px * var(--n))",
        ],
        "padding-bottom": [
            "calc(2px)",
            "calc(2px * var(--n))",
        ],
        "padding-left": [
            "calc(2%)",
            "calc(2% * var(--n))",
        ],
        "padding-right": [
            "calc(2px)",
            "calc(2px * var(--n))",
        ],
        "padding-top": [
            "calc(2%)",
            "calc(2% * var(--n))",
        ],
        "r": [
            "calc(2px)",
            "calc(2px * var(--n))",
        ],
        "right": [
            "calc(2%)",
            "calc(2% * var(--n))",
        ],
        "row-gap": [
            "calc(2%)",
            "calc(2% * var(--n))",
        ],
        "rx": [
            "calc(2px)",
            "calc(2px * var(--n))",
        ],
        "ry": [
            "calc(2%)",
            "calc(2% * var(--n))",
        ],
        "stop-opacity": [
            "calc(2)",
            "calc(2 * var(--n))",
        ],
        "stroke-opacity": [
            "calc(2%)",
            "calc(2% * var(--n))",
        ],
        "stroke-width": [
            "calc(2px)",
            "calc(2px * var(--n))",
        ],
        "tab-size": [
            "calc(2px)",
            "calc(2px * var(--n))",
        ],
        "text-decoration-thickness": [
            "calc(2px)",
            "calc(2px * var(--n))",
        ],
        "text-indent": [
            "calc(2%)",
            "calc(2% * var(--n))",
        ],
        "top": [
            "calc(2%)",
            "calc(2% * var(--n))",
        ],
        "transform-origin": [
            "calc(2px) calc(2%)",
            "calc(2px * var(--n)) calc(2% * var(--n))",
        ],
        "transition-delay": [
            "calc(2s)",
            "calc(2s * var(--n))",
        ],
        "transition-duration": [
            "calc(2s)",
            "calc(2s * var(--n))",
        ],
        "vertical-align": [
            "calc(2px)",
            "calc(2px * var(--n))",
        ],
        "width": [
            "calc(2%)",
            "calc(2% * var(--n))",
        ],
        "word-spacing": [
            "calc(2px)",
            "calc(2px * var(--n))",
        ],
        "x": [
            "calc(2px)",
            "calc(2px * var(--n))",
        ],
        "y": [
            "calc(2%)",
            "calc(2% * var(--n))",
        ],
        "z-index": [
            "calc(2)",
            "calc(2 * var(--n))",
        ],
        };
        let target = document.getElementById("target");
        for (let [property, values] of Object.entries(properties)) {
            for (let value of values) {
                target.setAttribute("style", `${property}: ${value}`);
                println(`${property}: '${value}' -> '${getComputedStyle(target)[property]}'`);
            }
        }
    });
</script>
